<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <span>个人设置</span>
      </template>
      <el-form label-width="100px" style="max-width:400px;margin:0 auto;">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username" disabled />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userInfo.email" placeholder="未设置" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userInfo.phone" placeholder="未设置" />
        </el-form-item>
        <el-form-item label="修改密码">
          <el-button type="primary">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const userInfo = userStore.userInfo || { username: '', email: '', phone: '' }
</script> 